<script setup>
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {ElMessage} from "element-plus";
import {RULE} from "../../../const";
import {getResponseData} from "../../../util";
import {listApi} from "../../../api/dept.js";
import {updateApi, updatePasswdApi, UPLOAD_AVATAR_URL} from "../../../api/emp.js";
import MyNav from "../../../components/MyNav.vue";
import MyUploader from "../../../components/MyUploader.vue";
import MyForm from "../../../components/MyForm.vue";

// 获取当前员工记录
let emp = JSON.parse(sessionStorage.getItem('emp'));

/* ==================== 查询全部的部门记录 ==================== */
// 所在部门下拉菜单选项
let deptItems = ref([]);

async function listDept() {
  let res = await listApi();
  let depts = getResponseData(res);
  Object.values(depts).forEach(dept => {
    deptItems.value.push({'label': dept['name'], 'value': dept['id']});
  });
}

/* ==================== 修改表单 ==================== */

// 表单项 + 表单值 + 表单规则
let items = shallowRef([
  {'label': '员工编号', 'prop': 'eno', 'span': 12, 'disabled': true},
  {'label': '所在部门', 'prop': 'deptId', 'span': 12, 'type': 'select', 'optionItems': deptItems.value},
  {'label': '员工岗位', 'prop': 'job', 'span': 12},
  {'label': '身份证号', 'prop': 'idCard', 'span': 12},
  {'label': '入职日期', 'prop': 'hiredate', 'type': 'date', 'span': 12},
  {'label': '员工微信', 'prop': 'wechat', 'span': 12},
  {'label': '员工姓名', 'prop': 'name', 'span': 12},
  {
    'label': '员工性别', 'prop': 'gender', 'span': 12, 'type': 'select', 'optionItems': [
      {'label': '女孩', 'value': 0},
      {'label': '男孩', 'value': 1},
      {'label': '保密', 'value': 2},
    ]
  },
  {'label': '手机号码', 'prop': 'phone', 'span': 12},
  {'label': '电子邮件', 'prop': 'email', 'span': 12},
  {'label': '紧急联系人', 'prop': 'emergencyContactName', 'span': 12},
  {'label': '紧急联系电话', 'prop': 'emergencyContactPhone', 'span': 12},
  {'label': '家庭住址', 'prop': 'address', 'type': 'textarea', 'rows': 4},
  {'label': '员工描述', 'prop': 'info', 'type': 'textarea', 'rows': 5},
]);
let data = shallowReactive(emp);
let rules = {
  'name': RULE.REALNAME,
  'phone': RULE.PHONE,
  'emergencyContactPhone': RULE.PHONE,
  'info': RULE.COMMON_INFO,
};

/* ==================== 修改员工密码 ==================== */
// 表单项 + 表单值 + 表单规则
let updatePasswdItems = shallowRef([
  {'label': '原密码', 'prop': 'oldPasswd', 'type': 'password', 'required': true, 'placeholder': '请输入原密码'},
  {'label': '新密码', 'prop': 'newPasswd', 'type': 'password', 'required': true, 'placeholder': '请输入新密码'},
  {'label': '确认密码', 'prop': 'rePasswd', 'type': 'password', 'required': true, 'placeholder': '请确认新密码'},
]);
let updatePasswdData = shallowReactive({'id': emp['id']});
let updatePasswdRules = {
  'oldPasswd': RULE.PASSWORD,
  'newPasswd': [
    {pattern: /^[_a-zA-Z0-9]{4,20}$/, message: '密码须由4到20个字母，数字或下划线组成'},
    {
      validator: (rule, value, callback) => {
        if (value === updatePasswdData['oldPasswd']) callback('新旧密码不能相同');
        else callback();
      }
    }
  ],
  'rePasswd': [
    {pattern: /^[_a-zA-Z0-9]{4,20}$/, message: '密码须由4到20个字母，数字或下划线组成'},
    {
      validator: (rule, value, callback) => {
        if (value !== updatePasswdData['newPasswd']) callback('两次密码不一致');
        else callback();
      }
    }
  ],
};

/* ==================== 修改成功后 ==================== */
function updateSuccess() {
  // 获取当前登录的员工
  let loginEmp = JSON.parse(sessionStorage.getItem('loginEmp'));
  // 若修改的是当前登录的员工，则跳入登录页面
  if (loginEmp['id'] === emp['id']) {
    ElMessage.success('修改了当前登录的员工信息，请重新登录！');
    setTimeout(() => router.push('/'), 1000);
  }
  // 否则跳入Emp列表页面
  else {
    router.push('/Emp');
  }
}

/* ==================== 上传头像 ==================== */
// 上传头像地址
let uploadUrl = shallowRef(UPLOAD_AVATAR_URL + '?id=' + emp['id']);

/* ==================== 加载函数 ==================== */
onMounted(() => listDept());

</script>

<template>

  <my-nav :items="[
    {'icon': 'Avatar', 'label': '用户管理', 'url': '/Emp'},
    {'icon': 'User', 'label': '员工列表', 'url': '/Emp'},
    {'icon': 'Edit', 'label': '修改员工'},
  ]"/>

  <el-row :gutter="30" class="emp-update-body" >
    <el-col :span="16">
      <el-card class="update-card" header="修改员工信息">
        <my-form type="update" v-if="deptItems.length > 0"
                 :items="items"
                 :data="data"
                 :rules="rules"
                 :api="updateApi"
                 :fn="updateSuccess"/>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="upload-avatar-card" header="上传员工头像">
        <my-uploader name="avatarFile"
                     :action="uploadUrl"
                     :showFileList="false"
                     :auto-upload="true"
                     :fn="updateSuccess"/>
      </el-card>
      <el-card class="update-passwd-card" header="修改员工密码">
        <my-form type="update"
                 :items="updatePasswdItems"
                 :data="updatePasswdData"
                 :rules="updatePasswdRules"
                 :api="updatePasswdApi"
                 :fn="updateSuccess"/>
      </el-card>
    </el-col>
  </el-row>

</template>

<style scoped lang="scss">
.emp-update-body {
  margin-top: 22px; // 上外边距
  height: 620px; // 高度
  overflow-y: scroll; // Y轴溢出滚动

  .update-passwd-card {
    margin-top: 28px; // 上外边距
  }
}
</style>